import React, {useEffect, useState} from "react";
import {containerList, containerOperate} from "@/api/docker";
import {
	ContainerDrawerProp,
	ContainerListProp,
	ContainerListQueryProp,
	ContainerOperateProp
} from "@/pages/docker/modules";
import {Button, Divider, Input, Space, Table, Dropdown, MenuProps, Radio, Tag, Typography, message} from "antd";
import {ColumnsType} from "antd/es/table";
import ContainerCreate from "@/pages/docker/components/container.create";



export const DockerContainer = () => {

	const columns: ColumnsType<ContainerListProp> = [
		{
			title: '容器名称',
			key: 'name',
			dataIndex: 'name',
			align: 'center',
			ellipsis: true,
			render: (text, record) => <Typography.Link>{text}</Typography.Link>
		},
		{
			title: '镜像名称',
			key: 'imageName',
			dataIndex: 'imageName',
			ellipsis: true,
			align: 'center'
		},
		{
			title: '端口',
			key: 'ports',
			dataIndex: 'ports',
			align: 'center',
			render: (text, record, index) =>
				record.ports && record.ports.length > 0 ?
					record.ports.map(item => <></>) :
					null
		},
		{
			title: '状态',
			key: 'state',
			dataIndex: 'state',
			align: 'center',
			render: (text, record, index) => {
				switch (record.state) {
					case "created":
						return <Tag color="#4096ff">已创建</Tag>
					case "running":
						return <Tag color="#389e0d">运行中</Tag>
					case "paused":
						return <Tag color="#8c8c8c">已暂停</Tag>
					case "restarting":
						return <Tag color="#fa541c">重启中</Tag>
					case "exited":
						return <Tag color="#b37feb">已退出</Tag>
					case "dead":
						return <Tag color="#ff4d4f">已停止</Tag>
					default:
						return <Tag>{text}</Tag>
				}
			}
		},
		{
			title: '运行时长',
			key: 'status',
			dataIndex: 'status',
			align: 'center',
		},
		{
			title: '创建时间',
			key: 'createTime',
			dataIndex: 'createTime',
			align: 'center',
			width: 160,
		},
		{
			title: '操作',
			key: 'active',
			align: 'center',
			width: 250,
			render: (text, record, index) => (
				<Space size={'small'}>
					<Dropdown placement="bottom" menu={{
						items: [
							{ key: 0, label: '启动', disabled: record.state === 'running' },
							{ key: 1, label: '停止', disabled: record.state === 'dead' },
							{ key: 2, label: '重启' },
							{ key: 3, label: '强停' },
							{ key: 4, label: '暂停', disabled: record.state === 'paused' },
							{ key: 5, label: '恢复' },
							{ key: 6, label: '重命名' },
							{ key: 7, label: '删除', danger: true }
						],
						onClick: (e) => onMenuClick(Number(e.key), record)
					}}>
						<Button type="link" style={{padding: 4}} onClick={(e) => e.preventDefault()}>操作</Button>
					</Dropdown>
					<Button type="link" style={{padding: 4}}>终端</Button>
					<Button type="link" style={{padding: 4}}>监控</Button>
					<Button type="link" style={{padding: 4}}>详情</Button>
					<Button type="link" style={{padding: 4}}>日志</Button>
				</Space>
			),
		},
	]


	const [total, setTotal] = useState<number>(0);
	const [operate, setOperate] = useState<ContainerOperateProp>({});
	const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
	const [query, setQuery] = useState<ContainerListQueryProp>({page: 1, size: 10, isAll: true});
	const [datasource, setDatasource] = useState<ContainerListProp[]>([]);
	const [drawerProp, setDrawerProp] = useState<ContainerDrawerProp>({createVisible: false})

	const loadData = async (query: ContainerListQueryProp) => {
		const {total, records} = await containerList(query);
		setDatasource(records)
		setTotal(total);
	}

	const onMenuClick = async (e: number, record: ContainerListProp) => {
		console.log('click', e, record);
		if (e === 6) {

		} else if (e === 7) {

		} else {
			await containerOperate({id: record.id, way: e})
			await loadData(query);
			message.success('操作成功');
		}

	};

	const openDrawer = (types: 'create' | 'info') => {
		if (types === 'create') {
			setDrawerProp({createVisible: true})
		}
	}

	const closeDrawer = (isLoad: boolean, types: 'create' | 'info') => {
		if (types === 'create') {
			setDrawerProp({createVisible: false})
		}
	}

	const changeShowData = async (isAll: boolean) => {
		let param: ContainerListQueryProp = {...query, isAll: isAll}
		await loadData(param);
		await setQuery(param);
	}

	useEffect(() => {
		loadData(query)
	}, [])

	return <>
		<Space>
			<Button type='primary' onClick={() => openDrawer('create')}>创建</Button>
			<Button type='primary' onClick={() => loadData(query)}>刷新</Button>
			<Divider type="vertical" />
			<Radio.Group value={query.isAll} buttonStyle="solid" onChange={(e) => changeShowData(e.target.value as boolean)}>
				<Radio.Button value={true}>全部</Radio.Button>
				<Radio.Button value={false}>运行</Radio.Button>
			</Radio.Group>
			<Input placeholder="输入容器名称进行搜索" allowClear />
		</Space>
		<Table
			bordered
			size={'small'}
			columns={columns}
			dataSource={datasource}
			style={{ marginTop: 10 }}
			rowKey={(record) => record.id}
			pagination={{
				onShowSizeChange: (current, size) => loadData({...query, page: current, size: size}),
				onChange: (page, pageSize) => loadData({...query, page: page, size: pageSize}),
				showTotal: () => `共 ${total} 个`,
				showQuickJumper: true,
				showSizeChanger: true,
				pageSize: query.size,
				current: query.page,
				size: 'default',
				total: total,
			}}
			rowSelection={{
				type: 'checkbox',
				selectedRowKeys: selectedRowKeys,
				onChange: (selectedRowKeys: React.Key[], selectedRows: ContainerListProp[]) => {
					setSelectedRowKeys([...selectedRowKeys.map(item => item as string)])
				}
			}}
		/>
		<ContainerCreate visible={drawerProp.createVisible} close={(isLoad) => closeDrawer(isLoad, 'create')} />
	</>
}